<template>
  <el-dialog
    v-model="showDialog"
    :title="title"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <el-form :model="hbForm" label-width="120px" ref="formRef">
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item
            label="外壳名称"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写外壳名称' }"
            prop="name"
          >
            <el-input v-model="hbForm.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item
            label="目录关键字"
            prop="dirKeyword"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写目录关键字' }"
          >
            <el-input v-model="hbForm.dirKeyword" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item label="目录值" prop="dir">
            <el-input v-model="hbForm.dir" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8">
          <label style="width: 120px" class="el-form-item__label">数字化加工文件</label>
        </el-col>
        <el-col :span="8">
          <label style="width: 120px" class="el-form-item__label">文件分类</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">文件数量</label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">XML</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.xml" type="number" placeholder="请输入文件个数" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">全文PDF</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.wholePdf" type="number" placeholder="请输入文件个数" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">章节PDF</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.chapterPdf" type="number" placeholder="请输入文件个数" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">HTML</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.html" type="number" placeholder="请输入文件个数" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">EPub</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.epub" type="number" placeholder="请输入文件个数" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">Mobi</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.mobi" type="number" placeholder="请输入文件个数" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="24">
          <label style="width: 120px" class="el-form-item__label">完整度计算规则</label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">基本信息占比</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.baseRatio" type="number" placeholder="请输入占比" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">数字化加工占比</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.processRatio" type="number" placeholder="请输入占比" />
          </label>
        </el-col>
      </el-row>
      <el-row justify="start">
        <el-col :span="8" :offset="8">
          <label style="width: 120px" class="el-form-item__label">审核占比</label>
        </el-col>
        <el-col :span="8">
          <label class="el-form-item__label">
            <el-input v-model="hbForm.examineRatio" type="number" placeholder="请输入占比" />
          </label>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance } from 'element-plus'
import * as houseBookApi from '@/api/house/book'

const title = ref('新建图书外壳')
const showDialog = ref(false)

const formRef = ref<FormInstance>()

const hbForm = ref({
  baseRatio: 30,
  processRatio: 30,
  examineRatio: 40
})

const openDialog = () => {
  showDialog.value = true
}
const closeDialog = () => {
  showDialog.value = false
  hbForm.value = {}
}
const updateDialog = async (id) => {
  showDialog.value = true
  hbForm.value = await houseBookApi.one(id)
}
const saveForm = () => {
  formRef.value.validate(async (valid) => {
    console.log(valid)
    if (valid) {
      console.log(hbForm.value)
      houseBookApi.save(hbForm.value).then((res) => {
        showDialog.value = false
        getList()
      })
    }
  })
}

const getList: any = inject('getList')

defineExpose({
  openDialog,
  updateDialog
})
</script>
<style>
.file-count {
  width: 120px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
